﻿@model IAclMappingModel
<script type="text/javascript">
        $(document).ready(function () {
            $("#@Html.FieldIdFor(model => model.SubjectToAcl)").click(toggleAcl);
            toggleAcl();
        });
        function toggleAcl() {
            if ($('#@Html.FieldIdFor(model => model.SubjectToAcl)').is(':checked')) {
                $('#pnl-acl').show();
            }
            else {
                $('#pnl-acl').hide();
            }
        }
</script>
<div class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            <admin-label asp-for="SubjectToAcl" />
            <div class="col-md-6 col-sm-6">
                <label class="mt-checkbox mt-checkbox-outline control control-checkbox control control-checkbox">
                    <admin-input asp-for="SubjectToAcl" />
                    <div class="control__indicator"></div>
                </label>
                <span asp-validation-for="SubjectToAcl"></span>
            </div>
        </div>
        <div class="form-group" id="pnl-acl">
            <admin-label asp-for="AvailableCustomerRoles" />
            <div class="col-md-6 col-sm-6">
                @if (Model.AvailableCustomerRoles != null && Model.AvailableCustomerRoles.Count > 0)
                {
                    @await Component.InvokeAsync("CommonAclDisabledWarning")
                    <div class="mt-checkbox-list">
                        @foreach (var customerRole in Model.AvailableCustomerRoles)
                        {
                            <label class="mt-checkbox mt-checkbox-outline control control-checkbox control control-checkbox">
                                <input type="checkbox" name="SelectedCustomerRoleIds" value="@customerRole.Id" checked="@(Model.SelectedCustomerRoleIds!=null && Model.SelectedCustomerRoleIds.Contains(customerRole.Id))" />@customerRole.Name
                                <div class="control__indicator"></div>
                            </label>
                        }
                    </div>
                }
                else
                {
                    <div class="note note-info">
                        No customer roles defined
                    </div>
                }
            </div>
        </div>
    </div>
</div>